<template>
	<view class="container">
		<uni-nav-bar class="nav" height="88rpx" leftWidth="0rpx" rightWidth="0rpx" :backgroundColor="navBgColor"
			:border="navBorder" :fixed="true">
			<view class="search-view flex-r ac">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit" @tap="$goBack(1)">
				</image>
				<view class="search flex-r ac" :class="{'active': isBlack}">
					<image class="search-icon" src="@/public/images/public/sy_ss.png" mode="aspectFit"></image>
					<input class="search-input text-secondary" v-model="searchValue" type="text" confirm-type="search"
						:maxlength="10" @confirm="submitSearch" :placeholder="'请输入您要搜索的'+(type)" :auto-focus="true"
						:focus="true" />
					<button class="search-btn text-secondary color-white" @tap="submitSearch">搜索</button>
				</view>
			</view>
		</uni-nav-bar>
		<view class="body flex-c">
			<view class="search-head flex-r ac">
				<text class="text-primary text-bold">{{isSearch ? '搜索结果' : '搜索记录'}}</text>
				<template v-if="!isSearch && history[searchType] && history[searchType][0]">
					<image src="@/public/images/public/qkssjl.png" mode="aspectFit"></image>
					<text class="text-secondary color-grey" @tap="clearHistory">清空搜索记录</text>
				</template>
			</view>
			<view class="result-body bottom-ios" v-if="isSearch" :class="{'empty': !dataList[0]}">
				<EmptyContent v-if="!dataList[0]" top="160rpx" text="搜索结果为空" img="qsy_zwxl" @refresh="submitSearch">
				</EmptyContent>
				<template v-else>
					<BarList v-if="searchType == 'bar'" :list="dataList"></BarList>
					<ContentList v-if="searchType == 'hot'" :marginTop="false" :list="dataList" type="ballbar"
						:showHot="false"></ContentList>
					<MemberList v-else-if="searchType == 'member'" :list="dataList"></MemberList>
				</template>
				<view class="list-end flex-r pt20 mb20" v-if="isEnd && dataList[0]">
					<text>已经到底啦～</text>
				</view>
			</view>
			<view class="history" v-else>
				<view class="history-body flex-r" v-if="!isSearch && history[searchType] && history[searchType][0]">
					<template v-for="(item, index) in history[searchType]">
						<view class="history-item" :key="index" @tap="goSearch(item)">
							<text class="color-grey">{{item}}</text>
						</view>
					</template>
				</view>
				<view class="empty-result" v-else>
					<text class="text-secondary color-grey">暂无搜索记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchType: 'bar',
				searchValue: '',
				barId: null,
				history: {},
				dataList: [],
				isSearch: false,
				pageNo: 1,
				isEnd: false,

				isBlack: false,
				navBgColor: 'rgba(255,255,255,0)',
				navBorder: false,
				type: null,
			}
		},
		components: {
			BarList: () => import("./components/ch-ballbar/ch-ballbarlist.vue"),
			MemberList: () => import("./components/ch-ballbar/ch-memberlist.vue"),
			ContentList: () => import("@/components/ch-article/ch-contentlist.vue"), //热帖列表
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		watch: {
			searchValue(newValue, oldValue) {
				if (oldValue && !newValue) {
					this.isSearch = false
				}
			},
		},
		onLoad() {
			this.getHistory();
			if (this.$Route.query.type) {
				this.searchType = this.$Route.query.type
			}
			if (this.$Route.query.bid) {
				this.barId = this.$Route.query.bid
			}
			if (this.$Route.query.type == 'bar') {
				this.type = '球吧'
			} else if (this.$Route.query.type == 'hot') {
				this.type = '热帖'
			} else if (this.$Route.query.type == 'member') {
				this.type = '球吧成员'
			}
		},
		onReachBottom() {
			if (!this.isEnd) {
				this.searchBallbar()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if (this.timer) {
				return false
			}
			this.timer = setTimeout(() => {
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		updated() {
			console.log(this.history,this.isSearch)
		},
		methods: {
			//提交搜索
			submitSearch() {
				if (this.searchValue.trim() == '') {
					uni.showToast({
						title: '关键词不能为空',
						icon: 'none'
					})
					return
				}
				this.dataList = []
				this.isSearch = true
				this.isFocus = false
				this.pageNo = 1
				this.searchBallbar();
				this.saveHistory();
			},
			//历史记录点击搜索
			goSearch(key) {
				this.searchValue = key;
				this.submitSearch()
			},
			//搜索专家
			searchBallbar() {
				if (this.searchType == 'hot') {
					this.$http.get({
						url: '/api/forum/article/recommend',
						data: {
							searchValue: this.searchValue,
							pageNo: this.pageNo,
							pageSize: 10,
						},
					}).then(data => {
						console.log(data, '热帖');
						if (data.success && data.result.total) {
							if (this.pageNo == 1) {
								this.dataList = data.result.records
							} else {
								this.dataList.push(...data.result.records)
							}
							this.isEnd = data.result.current >= data.result.pages
							this.pageNo = data.result.current + 1
						} else {
							uni.showToast({
								title: '暂无搜索结果',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
					})
				} else {
					this.$http.get({
						url: this.searchType == 'bar'&& this.searchType !== 'hot'? '/api/forum/list' : '/api/forum/user/list',
						data: {
							forumId: this.searchType == 'member' ? this.barId : null,
							searchValue: this.searchValue,
							pageNo: this.pageNo,
							pageSize: 10,
							roleTypes: ['bz', 'fb', 'fxs']
						},
					}).then(data => {
						console.log(data, '球吧');
						if (data.success && data.result.total) {
							if (this.pageNo == 1) {
								this.dataList = data.result.records
							} else {
								this.dataList.push(...data.result.records)
							}
							this.isEnd = data.result.current >= data.result.pages
							this.pageNo = data.result.current + 1
						} else {
							console.log('暂无搜索结果')
							uni.showToast({
								title: '暂无搜索结果',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
					})
				}

			},
			//获取历史记录
			getHistory() {
				let value = uni.getStorageSync('history_ballbar');
				if (value) {
					this.history = JSON.parse(value)
				}
			},
			//保存历史记录
			saveHistory() {
				let historyWords = []
				if (this.history[this.searchType]) {
					historyWords = this.history[this.searchType].filter(item => item != this.searchValue); //过滤重复数据
				}
				historyWords.unshift(this.searchValue); //添加到第一个位置
				historyWords.splice(15); //保留15个
				this.history[this.searchType] = historyWords
				uni.setStorageSync('history_ballbar', JSON.stringify(this.history)); //存储列表
			},
			//删除历史记录
			clearHistory() {
				this.history[this.searchType] = []
				uni.setStorageSync('history_ballbar', JSON.stringify(this.history)); //存储列表
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if (scrollTop > 10) {
					this.navBorder = true
				} else {
					this.navBorder = false
				}
				switch (true) {
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;

		.search-view {
			padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;

			.left {
				width: 48rpx;
				height: 48rpx;
			}

			.search {
				flex: 2;
				height: 72rpx;
				background: #ffffff;
				border-radius: 36rpx;

				&.active {
					background: #F2F5FA;
				}

				.search-icon {
					margin-left: 20rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.search-input {
					flex: 2;
					margin-left: 10rpx;
					height: 72rpx;

					/deep/ .uni-input-placeholder {
						color: #B3B3B3;
					}
				}

				.search-btn {
					margin: 0 6rpx 0 20rpx;
					padding: 0;
					width: 120rpx;
					height: 60rpx;
					background: #0055FF;
					border-radius: 30rpx;
					box-sizing: border-box;
					line-height: 60rpx;
				}
			}
		}

		.body {
			.search-head {
				height: 80rpx;
				padding: 0 20rpx;

				.text-primary {
					flex: 2;
				}

				image {
					margin-right: 10rpx;
					height: 32rpx;
					width: 32rpx;
				}
			}

			.history {
				min-height: calc(var(--safe-height) - #{$navbar-height} - 80rpx);
				background: #FFFFFF;

				.history-body {
					padding: 20rpx 20rpx 0;
					flex-wrap: wrap;
					justify-content: flex-start;

					.history-item {
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 30rpx;
						background: #F2F5FA;
						margin: 0 20rpx 20rpx 0;

						text {
							padding: 0 30rpx;
							font-size: 26rpx;
							line-height: 60rpx;
						}
					}
				}
			}

			.result-body {
				&.empty {
					background-color: #FFFFFF;
					min-height: calc(var(--safe-height) - #{$navbar-height} - 80rpx);
				}
			}

			.empty-result {
				padding: 20rpx;
			}
		}
	}
</style>